<template>
  <div class="chatbot-container" @mousedown="startDrag">
    <div v-if="isVisible" class="chatbot-iframe-container" @mousedown.stop="startResize" @mouseup="stopResize">
      <div class="chatbot-header" @mousedown.stop="startResize">
        <button class="chatbot-close-button" @click.stop="closeChat">X</button>
      </div>
      <iframe
        src="https://udify.app/chatbot/apWf5MznQXG3LZpV"
        frameborder="0"
        allow="microphone"
        class="chatbot-iframe"
      ></iframe>
    </div>
    <button v-else class="chatbot-toggle-button" @click="toggleChat">
      客服
    </button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isVisible: false,
      isDragging: false,
      isResizing: false,
      startX: 0,
      startY: 0,
      startWidth: 0,
      startHeight: 0,
    };
  },
  methods: {
    toggleChat() {
      this.isVisible = !this.isVisible;
    },
    closeChat() {
      this.isVisible = false;
    },
    startDrag(e) {
      this.isDragging = true;
      this.startX = e.clientX;
      this.startY = e.clientY;
    },
    stopDrag(e) {
      this.isDragging = false;
    },
    drag(e) {
      if (this.isDragging) {
        const dx = e.clientX - this.startX;
        const dy = e.clientY - this.startY;
        this.startX = e.clientX;
        this.startY = e.clientY;
        const newLeft = this.chatbotContainerLeft + dx;
        const newTop = this.chatbotContainerTop + dy;
        this.$refs.chatbotContainer.style.left = `${newLeft}px`;
        this.$refs.chatbotContainer.style.top = `${newTop}px`;
      }
    },
    startResize(e) {
      this.isResizing = true;
      this.startWidth = this.chatbotIframeContainer.offsetWidth;
      this.startHeight = this.chatbotIframeContainer.offsetHeight;
    },
    stopResize(e) {
      this.isResizing = false;
    },
    resize(e) {
      if (this.isResizing) {
        const dx = e.clientX - this.startX;
        const dy = e.clientY - this.startY;
        const newWidth = this.startWidth + dx;
        const newHeight = this.startHeight + dy;
        this.$refs.chatbotIframeContainer.style.width = `${newWidth}px`;
        this.$refs.chatbotIframeContainer.style.height = `${newHeight}px`;
      }
    },
  },
  mounted() {
    window.addEventListener('mousemove', this.drag);
    window.addEventListener('mouseup', this.stopDrag);
    window.addEventListener('mousemove', this.resize);
    window.addEventListener('mouseup', this.stopResize);
  },
  beforeDestroy() {
    window.removeEventListener('mousemove', this.drag);
    window.removeEventListener('mouseup', this.stopDrag);
    window.removeEventListener('mousemove', this.resize);
    window.removeEventListener('mouseup', this.stopResize);
  },
};
</script>
<style scoped>
.chatbot-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  cursor: pointer;
  user-select: none; /* 防止文本被选中 */
}

.chatbot-toggle-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.chatbot-iframe-container {
  position: relative;
  width: 300px; /* 控制宽度 */
  height: 400px; /* 控制高度 */
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: width 0.3s, height 0.3s; /* 添加过渡效果 */
}

.chatbot-header {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  background-color: #f5f5f5;
  cursor: move; /* 改变鼠标样式 */
}

.chatbot-close-button {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

.chatbot-iframe {
  width: 100%;
  height: 100%; /* 填充整个容器 */
  border-radius: 10px;
}
</style>